/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Consolas', v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
}

html,
body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* CSS变量定义 */
:root {
  --bg-color: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #fafafa;
  --text-color: #333333;
  --border-color: #e8e8e8;
  --primary-color: #1890ff;
  --primary-color-suppl: #e6f7ff;

  /* JSON 语法高亮 - 日间模式（高对比度） */
  --json-bg: #f8f8f8;
  --json-text: #2c3e50;
  --json-border: #d1d5db;
  --json-string: #d73502;
  /* 字符串 - 深红色 */
  --json-number: #0066cc;
  /* 数字 - 深蓝色 */
  --json-boolean: #7c3aed;
  /* 布尔值 - 紫色 */
  --json-null: #dc2626;
  /* null - 红色 */
  --json-key: #059669;
  /* 键名 - 深绿色 */
  --json-bracket: #b45309;
  /* 括号 - 深橙色 */
}

.app[data-theme="dark"] {
  --bg-color: #18181c;
  --bg-secondary: #101014;
  --bg-tertiary: #24242a;
  --text-color: #ffffff;
  --border-color: #303030;
  --primary-color: #1890ff;
  --primary-color-suppl: #1a1a1a;

  /* JSON 语法高亮 - 暗色模式 */
  --json-bg: #1e1e1e;
  --json-text: #d4d4d4;
  --json-border: #333;
  --json-string: #ce9178;
  /* 字符串 - 浅橙色 */
  --json-number: #b5cea8;
  /* 数字 - 浅绿色 */
  --json-boolean: #569cd6;
  /* 布尔值 - 蓝色 */
  --json-null: #569cd6;
  /* null - 蓝色 */
  --json-key: #9cdcfe;
  /* 键名 - 浅蓝色 */
  --json-bracket: #ffd700;
  /* 括号 - 金色 */
}

#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 表格样式优化 */
.n-data-table {
  background: white !important;
}

.n-data-table .n-data-table-thead {
  background: #fafafa !important;
}

.n-data-table .n-data-table-th {
  background: #fafafa !important;
  border-bottom: 1px solid #e8e8e8 !important;
  font-weight: 600 !important;
  color: #333 !important;
}

.n-data-table .n-data-table-td {
  border-bottom: 1px solid #f0f0f0 !important;
  background: white !important;
}

.n-data-table .n-data-table-tr:hover .n-data-table-td {
  background: #f8f9fa !important;
}

/* 卡片样式 */
.n-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e8e8e8 !important;
}

/* 按钮样式优化 */
.n-button {
  border-radius: 6px !important;
}

/* 输入框样式 */
.n-input {
  border-radius: 6px !important;
}

/* 选择器样式 */
.n-select {
  border-radius: 6px !important;
}

/* 标签样式 */
.n-tag {
  border-radius: 4px !important;
}

/* 模态框样式 */
.n-modal {
  border-radius: 8px !important;
}

/* 代码块样式 */
.n-code {
  border-radius: 6px !important;
  background: #f8f9fa !important;
  border: 1px solid #e8e8e8 !important;
}

/* 暗色主题适配 */
.app[data-theme="dark"] .n-data-table {
  background: #18181c !important;
}

.app[data-theme="dark"] .n-data-table .n-data-table-thead {
  background: #101014 !important;
}

.app[data-theme="dark"] .n-data-table .n-data-table-th {
  background: #101014 !important;
  border-bottom: 1px solid #303030 !important;
  color: #ffffff !important;
}

.app[data-theme="dark"] .n-data-table .n-data-table-td {
  border-bottom: 1px solid #303030 !important;
  background: #18181c !important;
  color: #ffffff !important;
}

.app[data-theme="dark"] .n-data-table .n-data-table-tr:hover .n-data-table-td {
  background: #24242a !important;
}

.app[data-theme="dark"] .n-card {
  background: #18181c !important;
  border: 1px solid #303030 !important;
}

.app[data-theme="dark"] .n-code {
  background: #0c0c0c !important;
  border: 1px solid #303030 !important;
  color: #ffffff !important;
}